<template>
<!-- 	<view class="con" @touchstart="handletouchstarts" @touchend="handletouchends">
		学习触屏事件
	</view> -->
		<swiper-action ref="swiperaction" @onSwiperAction="onSwiperAction">
			<template v-slot:swiperAction>
				<!-- <view class="con" > -->
					<!-- {{data.imgList}} -->
				<!-- </view> -->
				<image :src="data.imgList.thumb" class="img"></image>
				<!-- muted 是否静音 , objectFit 类似于image的mode属性-->
				<!-- <video :muted="muted" src="" objectFit="fill"></video> -->
				<!-- 学习触屏事件 -->
			</template>
			
		</swiper-action>
		<!-- 处理转发时 透明度百分之百 高宽百分之百 绝对定位 -->
		<button open-type="share">转发</button>
		<view class="bu" @click="handleDownload">点击下载</view>
</template>

<script setup lang="ts">
	import {onLoad, onLaunch, onShow, onHide } from "@dcloudio/uni-app";
	import moment from "moment";
	import {swiperAction}from '../../components/swiperAction.vue'
	import {ref,onMounted,reactive,toRaw} from 'vue';
	let swiperaction = ref(null);
	const app = getApp();
	// let indexs = ref(0);
	// let imgList = reactive({})
		
	let data = reactive({
		indexs : 0,
		imgList : {}
	})
	onLoad(()=>{
		
		data.indexs = app.globalData.imgIndex
		console.log(data.indexs)
		data.imgList = app.globalData.imgList[data.indexs]
		console.log(data.imgList)
		
		// console.log(moment(app.globalData.imgList[app.globalData.imgIndex].atime*1000).fromNow()) // 距离现在多少
		
	})
	onMounted(()=>{
		console.log(swiperaction.value)
		// const handletouchstarts = swiperaction.value.handletouchstart()
	})
	const onSwiperAction = (dir:string) => {
		console.log(dir)
		if(dir === "left" && data.indexs <= app.globalData.imgList.length-1){
			// data.indexs++;
			data.imgList = app.globalData.imgList[++data.indexs]
		}else if(data.indexs > 0){
			// data.indexs--;
			data.imgList = app.globalData.imgList[--data.indexs]
			console.log(data.indexs)
		}else{
			uni.showToast({
				title:"没有数据了",
				icon:"none"
			})
		}
	}
	
	// 使用expose暴露的方法,可以直接使用
	// const handletouchstarts = (e) =>{
	// 	swiperaction.value.handletouchstart(e)
	// 	console.log(22)
	// }
	
	// const handletouchends = (e) =>{
	// 	swiperaction.value.handletouchend(e)
	// 	console.log(22)
	// }
	
	// const isLegals = (e) =>{
	// 	swiperaction.value.isLegal(e)
	// 	console.log(22)
	// }
	
	// 下载
	
	const handleDownload = async () => {
		// 1.将远程文件下载到小程序内存中
		// 2.将小程序内存中的文件下载到本地中
		await uni.showLoading({
			title:"下载中..."
		})
		const result = await uni.downloadFile({url:data.imgList.img})
		const temFilePath = result.tempFilePath
		console.log(temFilePath)
		const res = await uni.saveImageToPhotosAlbum({
			filePath:temFilePath
		})
		// console.log(res)
		uni.hideLoading();
		
		uni.showToast({
			icon:'success',
			title: "下载成功",
			duration: 3000
		})
	}

</script>

<style scoped>
	.con{
		width: 100%;
		height: 500rpx;
		/* background-color: #007AFF; */
		border:2px #007AFF solid;
	}
	.bu{
		height: 100rpx;
		width: 80%;
		margin-left: 10%;
		background-color: #18BC37;
		color: #fff;
		font-size: 45rpx;
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 50rpx;
	}
	.img{
		height: 100vh;
		width: 100vw;
		z-index: -1;
		filter: blur(20px);
	}
</style>
